<template>
    <div class="index-page" v-if="allData != null">
      <!-- 头部 -->
      <searchHeader></searchHeader>
      <!-- 面包、蛋糕、小食、配件分隔栏 -->
      <div class="category-segments">
        <div
          v-for="segment in segments"
          :key="segment.id"
          class="segment-item"
          @click="selectSegment(segment)"
          :class="{ 'active-segment': selectedSegment === segment.id }"
        >
          {{ segment.name }}
        </div>
      </div>
      <!-- 首页内容 -->
      <!-- 轮播图 -->
      <van-swipe v-if="swiperData" class="my-swipe" :autoplay="3000" indicator-color="yellow">
        <van-swipe-item v-for="(item, index) in swiperData.source.adsense" :key="index">
          <img class="swipe-img" :src="item.img" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- 商品类别 -->
      <shopClassifyTitleVue :zhText="bjtjData?.title" :enText="bjtjData?.info" :isMore="true"></shopClassifyTitleVue>
      <!-- 蛋糕图片 -->
      <div class="cake-img">
        <img v-for="(item, index) in bjtjData?.source?.adsense" :key="index" :src="item.img" />
      </div>
      <shopClassifyTitleVue :zhText="fsjdData?.title" :enText="fsjdData?.info" :isMore="true"></shopClassifyTitleVue>
      <img class="cake-img-big" :src="fsjdData?.source?.adsense[0]?.img">
      <!-- 商品列表 -->
      <div class="shop-box">
        <ShopItem v-for="(item, index) in fsjdData.source.goods" :item="item" :key="index"></ShopItem>
      </div>
      <!-- 分类按钮 -->
      <div class="category-button" @click="goToCategory">
        分类
      </div>
      <!-- 底部导航 -->
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="contact" to="/profile">我的</van-tabbar-item>
      </van-tabbar>
    </div>
    <div v-else>
      加载中...
    </div>
  </template>
  
  <script>
  import { Swipe, SwipeItem, Icon, Tabbar, TabbarItem } from 'vant';
  import ShopItem from '@/components/shopItem.vue';
  
  export default {
    created() {
      this.$axios.get("http://localhost:8888/index").then(res => {
        console.log(res, '请求成功');
        this.allData = res.data;
        res.data.list.forEach(item => {
          if (item.title == '首页轮播') {
            this.swiperData = item;
            console.log(this.swiperData, '轮播图数据'); // 检查数据是否正确赋值
          }
          if (item.title == '本季推荐') {
            this.bjtjData = item;
            console.log(this.bjtjData, '本季推荐数据'); // 检查数据是否正确赋值
          }
          if (item.title == '法式经典') {
            this.fsjdData = item;
            console.log(this.fsjdData, '法式经典数据'); // 检查数据是否正确赋值
          }
        });
      }).catch(err => {
        console.log(err, '请求失败');
      });
    },
    components: {
      searchHeader: () => import("../components/searchHeader.vue"),
      tabBar: () => import("../components/tabBar.vue"),
      shopClassifyTitleVue: () => import("../components/shopClassifyTitle.vue"),
      ShopItem,
      'van-swipe': Swipe,
      'van-swipe-item': SwipeItem,
      'van-icon': Icon,
      'van-tabbar': Tabbar,
      'van-tabbar-item': TabbarItem
    },
    data() {
      return {
        active: 0, // 默认激活第一个标签（首页）
        allData: null,
        swiperData: null,
        bjtjData: null, // 本季推荐数据
        fsjdData: null, // 法式经典数据
        shopList: null, // 商品列表数据
        tabs: [
          { icon: 'home-o', text: '首页', name: 'home' },
          { icon: 'search', text: '搜索', name: 'search' },
          { icon: 'friends-o', text: '分类', name: 'category' },
          { icon: 'shopping-cart-o', text: '购物车', name: 'gouwuche' }
        ],
        segments: [
          { id: 1, name: '面包' },
          { id: 2, name: '蛋糕' },
          { id: 3, name: '小食' },
          { id: 4, name: '配件' }
        ],
        selectedSegment: 1
      };
    },
    methods: {
      goToCart() {
        this.$router.push({ name: 'gouwuche' });
      },
      goToCategory() {
        this.$router.push({ name: 'category' });
      },
      selectSegment(segment) {
        this.selectedSegment = segment.id;
        // 根据 selectedSegment 的值加载不同的数据
        // 这里可以根据需要添加逻辑
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .category-segments {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
  }
  
  .segment-item {
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .segment-item:hover {
    background-color: #f9f9f9;
  }
  
  .active-segment {
    background-color: #e0e0e0;
    font-weight: bold;
  }
  
  .shop-box {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
  }
  
  .cake-img-big {
    width: 100%;
    height: 190px;
  }
  
  .swipe-img {
    width: 100%;
    height: 395px;
  }
  
  .cake-img {
    overflow-x: scroll;
    height: 145px;
    white-space: nowrap;
  
    & img:first-child {
      width: 216px;
      height: 100%;
    }
  
    img {
      width: 113px;
      height: 100%;
    }
  }
  
  .category-button {
    display: none; /* 移除单独的分类按钮 */
  }
  </style>